const template = document.createElement("template");
template.innerHTML = /*html*/ `
  <link rel="stylesheet" href="../common/style/vars.css"></link>
  <style>
    :host {
      display: block;
      width: 100%;
      height: 100%;
      background-color: var(--bg-color);
      border-radius: 15px;
      overflow: hidden;
      color: var(--font-color);
    }

    :host *{
      box-sizing: border-box;
    }

   

    .tab-win-closure {
      width: 100%;
      padding: 10px;
      -webkit-app-region: drag;
      cursor: move;
    }
    .tab-win-closure-btn{
      margin: auto 0 auto auto;
      -webkit-app-region: no-drag;
      cursor: pointer;
    }

    .tab-win-main{
      height: calc(100% - 32px);
      overflow: auto;
      padding: 10px;
    }

        /* 滚动槽 */
    ::-webkit-scrollbar {
      width: 6px;
      height: 6px;
    }
    ::-webkit-scrollbar-track {
      border-radius: 3px;
      -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.08);
    }
    /* 滚动条滑块 */
    ::-webkit-scrollbar-thumb {
      border-radius: 3px;
      background: var(--bg-select);
      -webkit-box-shadow: inset 0 0 10px var(--shadow-color);
    }

  </style>
  <div class="tab-win-closure">
    <icon-svg name="closure" class="tab-win-closure-btn"></icon-svg>
  </div>
  <div class="tab-win-main">
    <slot></slot>
  </div>
`;

export default class Tab extends HTMLElement {
  constructor() {
    super();

    const shadow = this.attachShadow({ mode: "closed" });
    const content = template.content.cloneNode(true);

    if(window.utools){
      let bool = window.utools.isDarkColors();
      if(bool){
        this.classList.add('dark')
      }else{
        this.classList.add('light')
      }
    }

    let closedEl = content.querySelector(".tab-win-closure");
    closedEl.addEventListener("click", () => {
      if (window.utools) {
        window.closeWin();
      }
    });

    shadow.appendChild(content);
  }

  async connectedCallback() {
    if (!customElements.get("icon-svg")) {
      let IconSvg = await import("./IconSvg/IconSvg.js");
      customElements.define("icon-svg", IconSvg.default);
    }
  }
}
